<template>
    <div class="shuju">
        <!-- --------------------底部表格--------------------------------- -->
        <el-table stripe :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)" tooltip-effect="dark" style="width: 95%; margin: 0 auto; font-size: 15px; " :header-cell-style="{ background: '#f9f9f9', color: '#606266' }">
            <el-table-column type="selection" v-model="id" width="55">
            </el-table-column>

            <el-table-column label="员工工号" prop="staffnumber" width="125"> </el-table-column>

            <el-table-column label="员工姓名" prop="staffName" width="125">
            </el-table-column>

            <el-table-column label="员工性别" width="115" prop="staffsex" :formatter="staffsex">
            </el-table-column>
            <el-table-column label="入职日期" prop="staffdate" width="125">0
            </el-table-column>

            <el-table-column label="员工照片" prop="staffimg" width="125">6
                <template slot-scope="scope">
                    <img :src="scope.row.staffimg" alt="" width="50px" height="70px">
                </template>
            </el-table-column>

            <el-table-column label="员工工资" prop="staffmoney" width="125">
            </el-table-column>

            <el-table-column label="员工年龄" prop="staffage" width="125">
            </el-table-column>

            <el-table-column label="员工身份证" prop="staffcard" width="132">
            </el-table-column>

            <el-table-column label="操作" width="135">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showDetail(scope.row)">查看详情</el-button>
                    <el-button type="text" size="mini" @click="xuyue(scope.row)">续约</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- ---------------------------底部分页------------------------------------ -->
        <div style="margin-top: 0px; margin-left: 80px; position: absolute">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 7, 10]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="list.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props: ["list"],
    data() {

        
        return {
            currentPage: 1, //默认进入第几页
            currentIndex: "", //我也不知道
            pagesize: 5, //每页显示条数
        }
    },
    methods: {
        staffsex(row, column) {
            if (row.staffsex === 1) {
                return '男'
            } else if (row.staffsex === 2) {
                return '女'
            }
        }


    }

}
</script>
<style>
.sign-search {
    margin-top: -20px;
    margin-left: 20px;
    width: 97%;
    height: 50px;
}
.status {
    float: left;
    margin-left: 30px;
}
.status-1 {
    float: left;
    margin-left: 30px;
    margin-top: 15px;
}
.sign-sp {
    margin-right: 10px;
}
</style>